<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>The photo wall of minions</title>
        <style>
			/* RESET */
body{font-family:Tahoma,Helvetica,"\5b8b\4f53","Arial",sans-serif;font-size:12px;color:#fff;}
			body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0}
			input,button,textarea{border:none 0}
			fieldset,img{border:0}
			table{border-collapse:collapse;border-spacing:0}
			ul,ol{list-style:none}
			a:link{text-decoration:none}
			a:visited{text-decoration:none}
			a:hover{text-decoration:none}
			
			.clear{zoom:1}
			.clear:after{content:"";display:block;clear:both}
/* polaroids */
.polaroids{width:970px;margin:0 0 18px 10px;}
.polaroids li{display: inline;}
.polaroids a{background: #fff;display: inline;float:left;margin:0 0 27px 30px;width:auto;padding:10px 10px 15px;text-align: center;font-family: "Marker Felt", sans-serif;text-decoration: none;color:#333;font-size: 18px;
-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);
-o-box-shadow:0 3px 6px rgba(0,0,0,.25);
box-shadow:0 3px 6px rgba(0,0,0,.25);
}
.polaroids img{display: block;width:190px;margin-bottom:12px;}
.polaroids a:after{content: attr(title);/* Ie8+,FF,Chorme,Safari */}
.polaroids li:nth-child(even) a{
	-webkit-transform:rotate(2deg);
	-moz-transform:rotate(2deg);
	-ms-transform:rotate(2deg);
	transform:rotate(2deg);
}
.polaroids li:nth-child(3n) a{
	-webkit-transform:none;
	-moz-transform:none;
	-ms-transform:rotate(2deg);
	transform:none;
	position: relative;
	top:-5px;
}
.polaroids li:nth-child(5n) a{
	-webkit-transform:rotate(5deg);
	-moz-transform:rotate(5deg);
	-ms-transform:rotate(5deg);
	transform:rotate(5deg);
	position: relative;
	right:5px;
}
.polaroids li:nth-child(8n) a{
	position: relative;
	top:8px;
	right:5px;
}
.polaroids li:nth-child(11n) a{
	position: relative;
	top:3px;
	right:-5px;
}
.polaroids li a:hover{
	-webkit-transform:scale(1.25);
	-moz-transform:scale(1.25);
	-ms-transform:scale(1.25);
	transform:scale(1.25);
	-webkit-box-shadow:0 3px 6px rgba(0,0,0,.5);
	-moz-box-shadow:0 3px 6px rgba(0,0,0,.5);
	-o-box-shadow:0 3px 6px rgba(0,0,0,.5);
	box-shadow:0 3px 6px rgba(0,0,0,.5);
	position: relative;
	z-index: 5;
}
.polaroids li.messy a{margin-top:-375px;margin-left:160px;
	-webkit-transform:rotate(-5deg);
	-moz-transform:rotate(-5deg);
	-ms-transform:rotate(-5deg);
	transform:rotate(-5deg);
}
    </style>
	</head>
	<body>
		<center>
			<h2>HELLO!!!</h2>
		<ul class="polaroids">
			<li><a href="#" title="hope"><img src="https://wx2.sinaimg.cn/mw690/c12281e7gy1g262597h89j20sg0sgacq.jpg" alt="hope!"></a></li>
			<li><a href="#" title="My like"><img src="https://wx4.sinaimg.cn/mw690/c12281e7gy1g2625ab75nj20qo0m8dm9.jpg" alt="minions"></a></li>
			<li><a href="#" title="My idol"><img src="https://wx4.sinaimg.cn/mw690/c12281e7gy1g2625bd03dj21hc0u0gwo.jpg" alt="best"></a></li>
			<li><a href="#" title="collect"><img src="https://wx3.sinaimg.cn/mw690/c12281e7gy1g2625gmyxpj20u0140e82.jpg" alt="abstract"></a></li>			
			<li><a href="#" title="scenery"><img src="https://wx1.sinaimg.cn/mw690/c12281e7gy1g2625cfni0j21c00u0guo.jpg" alt="wow"></a></li>
			<li><a href="#" title="minions"><img src="https://wx3.sinaimg.cn/mw690/c12281e7gy1g2625ajzp1j20xc0goafr.jpg" alt="yeah"></a></li>
			<li><a href="#" title="scenery"><img src="https://wx3.sinaimg.cn/mw690/c12281e7gy1g26259vf30j21ao0t6af1.jpg" alt="wow"></a></li>
			<li><a href="#" title="6"><img src="https://wx4.sinaimg.cn/mw690/c12281e7gy1g2625eaqh3j20u01d2e81.jpg" alt="666"></a></li>
		</ul>
		</center>
	</body>
</html>
